<template>

	<el-image
		class="image-view"
		:style="style"
		:src="fullSrc"
		:fit="fit"
		:lazy="lazy"
		:preview-src-list="previewSrcList"
		:scroll-container="scrollContainer"
	></el-image>


</template>

<script>
export default {
	props: {
		src: {
			type:String
		},
		srcList:{
			type: Array,
			default: ()=>{
				return []
			}
		},
		// 是否显示提示
		preview: {
			type: Boolean,
			default: true
		},
		fit:{
			type: String,
			default: 'scale-down'
		},
		width:{
			type: Number|String,
			default: 100
		},
		height:{
			type: Number|String,
			default: 100
		},
		lazy: {
			type: Boolean,
			default: true
		},
		scrollContainer:{
			type: String
		}

	},
	data() {
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			dialogImageUrl: "",
			dialogVisible: false
		};
	},
	computed: {
		// 是否显示提示
		style() {
			let width = 'auto';
			if(typeof this.width == 'number'){
				if(this.width > 0){
					width = this.width + 'px';
				}
			}
			else{
				width = this.width;
			}

			let height = 'auto';
			if(typeof this.height == 'number'){
				if(this.height > 0){
					height = this.height + 'px';
				}
			}
			else{
				height = this.height;
			}


			return {
				width: width,
				height: height
			}
		},
		fullSrc(){
			return this.buildFullSrc(this.src)
		},
		previewSrcList(){
			if(this.preview){
				if(this.srcList && this.srcList.length > 0){
					return this.srcList.map(item=>{
						return this.buildFullSrc(item);
					})
				}
				return [this.fullSrc];
			}
			return [];
		}
	},
	methods: {
		/**
			* 组建完整路径
			* @param src
			* @returns {string|*}
			*/
		buildFullSrc(src){

			if(!src || src.indexOf("http://") == 0 ||src.indexOf("https://") == 0){
				return src;
			}
			return this.baseUrl + src
		}
	}
};
</script>
